
import React, { useState, useEffect } from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    useRouteMatch,
    useParams
} from "react-router-dom";
import { Layout } from 'antd';
import navList from '../router/config'
import HomeAll from './homeAll'
import HomeRelease from './homeRelease'
const { Content, Sider, Header } = Layout;

class Abc extends React.Component {
    render() {
        console.log(this)
        return (
            <div>12</div>
        )
    }
}
function NavLeft(props) {
    return (
        <Sider
            style={{
                overflow: 'auto',
                height: '100vh',
                position: 'fixed',
                left: 0,
                backgroundColor: '#22242F'
            }}
        >
            <div className="navLeft-logo">
                1
                </div>
            <ul className="navLeft">
                {/* {props.list.map((e, i) => {
                    return (
                        <Link className={`${props.active === i ? 'active' : ''} item`} key={i} onClick={() => { props.onActive(i) }} to={e.link}>
                            {e.name}
                        </Link>
                    )
                })} */}
            </ul>
        </Sider>
    )
}
function NavTabs(props) {
    return (
        <div style={{ padding: '6px 16px 0px 6px', float: 'left' }} >
            <div className="navTabs">
                {props.list.map((e, i) => {
                    return (
                        <Link to={e.link} className={`${props.active === i ? 'active' : ''} navTabs-item`}
                            onClick={() => { props.onActive(i) }}
                            key={i}>
                            {e.name}
                        </Link>
                    )
                })}
            </div>
        </div >
    )

}
const App = function () {
    const [navTabShow, setNavTabShow] = useState(true);
    const [leftActive, setLeftActive] = useState(0);
    // const [tabActive, setTabActive] = useState(0);

    function onLeftActive(i) {
        setLeftActive(i)
    }

    // function onTabActive(i) {
    //     console.log(i)
    //     setTabActive(i)
    // }
    useEffect(() => {
        setNavTabShow(!navList[leftActive].list.length ? false : true)
    }, [leftActive])


    console.log(this)
    return (
        <Layout style={{ height: '100%' }}>
            <NavLeft list={navList} active={leftActive} onActive={onLeftActive} ></NavLeft>
            <Layout style={{ marginLeft: 200, height: '100%' }}>
                <HeadTop></HeadTop>
                <Content style={{ padding: '10px', boxSizing: 'border-box', height: 'calc(100% - 64px)' }}>
                    {/* <NavTabs list={navList[leftActive].list} active={navList[leftActive].active} onActive={onTabActive}></NavTabs> */}
                    <div style={{ width: navTabShow ? 'calc(100% - 132px)' : '100%', backgroundColor: '#fff', height: '100%', float: 'right', }}>
                        <HomeAll></HomeAll>
                        {/* <Route path="/app/home/homeAll" component={HomeAll} /> */}
                        {/* <Route path="/app/home/homeRelease" component={HomeRelease} /> */}
                    </div>
                </Content>
            </Layout>
        </Layout>
    )
    // onNavActive(i) {
    //     if (!this.state.navList[i].list.length) {
    //         this.setState({
    //             isNavTab: false
    //         })
    //     } else {
    //         this.setState({
    //             isNavTab: true
    //         })
    //     }
    //     this.setState({
    //         navActive: i
    //     })
    // }
    // onNavTabActive(i) {
    //     console.log(i)
    //     let navList = this.state.navList;
    //     navList[this.state.navActive].active = i;
    //     this.setState({
    //         navList: navList
    //     })
    // }
}
export default App



class HeadTop extends React.Component {
    render() {
        return (
            <Header style={{ height: '64px', backgroundColor: '#fff' }}>456</Header>
        )
    }
}